<template>
  <TopSafeArea />

  <view class="container">

    <view>
      <view>
        标题:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" :value="pwdInfo?.title" placeholder="" @input="onTitleInput" />
      </view>
    </view>
    <view>
      <view class="detail-item">
        用户名:
        <button class="uni-btn" type="primary" @click="setClipboardData(pwdInfo?.username)">复制</button>
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" :value="pwdInfo?.username" placeholder="" @input="onTitleInput" />
      </view>
    </view>
    <view>
      <view class="detail-item">
        密码:
        <button class="uni-btn" type="primary" @click="setClipboardData(pwdInfo?.password)">复制</button>
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" :value="pwdInfo?.password" placeholder="" @input="onTitleInput" />
      </view>
    </view>
    <view>
      <view class="detail-item">
        链接:
        <button class="uni-btn" type="primary" @click="setClipboardData(pwdInfo?.link)">复制</button>
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" :value="pwdInfo?.link" placeholder="" @input="onTitleInput" />
      </view>
    </view>
    <view>
      <view>
        说明:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" :value="pwdInfo?.remark" placeholder="" @input="onTitleInput" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import type { PwdInfo } from '@/api/pwd/type'
import { getCurrentInstance, ref } from 'vue'

const pwdInfo = ref<PwdInfo>()
onLoad(async () => {
  console.log('pwd detail onLoad')
  const instance = getCurrentInstance()?.proxy
  // @ts-ignore
  const eventChannel = instance?.getOpenerEventChannel()
  eventChannel.on('pwdDetailEvent', function(data: PwdInfo) {
    console.log('pwdDetailEvent data:')
    // @ts-ignore
    pwdInfo.value = data.data
  })
})

const onTitleInput = (e: any) => {
  console.log('onTitleInput', e)
}
const setClipboardData = (text: string) => {
  uni.setClipboardData({
    data: text,
    success: function() {
      console.log('success')
    },
  })
}

</script>

<style scoped lang="scss">
.container {
  height: 100vh;

  ::v-deep & * {
    font-size: 17px;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .uni-btn {
      margin-left: 10px;
    }
  }
}

@media (prefers-color-scheme: dark) {
  /* DarkMode 下的样式 start */
  .container {

    background-color: rgba(31, 42, 61, 0.49) !important; // 强制覆盖子元素的背景颜色
    color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    ::v-deep & * {
      background-color: $uni-dark-bg-color !important; // 强制覆盖子元素的背景颜色
      color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    }

  }
  /* DarkMode 下的样式 end */
}


</style>